<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  JQUERY -->
    <script type="text/javascript" src="js/jquery.js"></script>

    <!--  BOOTSTRAP -->
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>

    <!--  PAGINATION plugin -->
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="../bootstrap/js/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="../bootstrap/localization/en.js"></script>

    <script>
        $(function () {
            $("#demo").bs_pagination({
                currentPage: 1,//当前页号,相当于pageNo

                rowsPerPage: 10,//每页显示条数,相当于pageSize
                totalRows: 1000,//总条数
                totalPages: 100,  //总页数,必填参数.

                visiblePageLinks: 5,//最多可以显示的卡片数

                showGoToPage: true,//是否显示"跳转到"部分,默认true--显示
                showRowsPerPage: true,//是否显示"每页显示条数"部分。默认true--显示
                showRowsInfo: true,//是否显示记录的信息，默认true--显示

                //用户每次切换页号，都自动触发本函数;
                //每次返回切换页号之后的pageNo和pageSize
                onChangePage: function (event, pageObj) { // returns page_num and rows_per_page after a link has clicked
                    //js代码
                    // alert(pageObj.currentPage);
                    // alert(pageObj.rowsPerPage);
                }
            });
        });
    </script>
</head>
<body>
<div id="demo"></div>
</body>
</html>